import React, { PureComponent, Fragment } from 'react'
import { Form } from 'antd'
import { connect } from 'dva'
import moment from 'moment'
import numeral from 'numeral'
import * as R from 'ramda'
import PropTypes from 'prop-types'
import Ellipsis from '@/components/Ellipsis'
import PateoStandardTable from '@/common/PateoTable/PateoStandardTable'
import PateoSearchFormExpand from '@/common/PateoTable/PateoSearchForm/PateoSearchFormExpand'
import { getDicByKey, paginationProps, isNotEmptyAndNil, isEmptyOrNil } from '@/utils/common'

const numFormat = '0.000000'

@connect(({ common, loading }) => ({
  common,
  loading: loading.models.common,
}))
// @Form.create()
export default class RcUerInfoTab extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.array,
  }
  state = {
    formValues: {},
  }

  componentDidMount() {
    const { dispatch, deviceId } = this.props
    dispatch({
      type: 'common/pageGet',
      payload: { url: '/vehicle/rcUserInfo', deviceId },
    })
  }

  handleRangePicker = fields => {
    if (isNotEmptyAndNil(fields['rcTimeRange'])) {
      const [start, end] = fields.rcTimeRange
      fields['startTime'] = start
      fields['endTime'] = end
    }
    delete (fields['rcTimeRange'])
  }

  disabledDate = R.either(
    R.lt(moment().endOf('day')),
    R.gt(moment().subtract(59, 'day').startOf('day')),
  )

  formatLocation = ({ lat, lon }) => {
    const formater = location => numeral(location).format(numFormat)
    const locationExist = (text, location) => R.ifElse(
      isNotEmptyAndNil,
      R.always(`${text}:${formater(location)}  `),
      R.always(''),
    )(location)
    const allNotExist = (isEmptyOrNil(lat) && isEmptyOrNil(lon)) ? '-' : ''
    return allNotExist + locationExist('经度', lon) + locationExist('纬度', lat)
  }

  render() {
    const { common: { data: { rows, pagination } }, loading, deviceId } = this.props
    const { formValues } = this.state
    const columns = [
      {
        title: '事件名称',
        dataIndex: 'eventName',
      }, {
        title: '远程控制名称',
        dataIndex: 'operationName',
        render: text => text ? getDicByKey(this.context.dicData, 'remoteControlItem', text) : '-',
        // width: '12%',
      }, {
        title: '操作时间',
        dataIndex: 'createDate',
        render: text => moment(text).format('YYYY-MM-DD HH:mm:ss') || '-',
      }, {
        title: '手机类型',
        dataIndex: 'deviceName',
        render: R.defaultTo('-'),
      }, {
        title: '手机号码',
        dataIndex: 'ulid',
        render: R.defaultTo('-'),
      }, {
        title: 'IP地址',
        dataIndex: 'ip',
        render: text => <Ellipsis length={12} tooltip>{text || '-'}</Ellipsis>,
      }, {
        title: 'T-BOX回执时间',
        dataIndex: 'tboxResponseTime',
        render: R.defaultTo('-'),
      }, {
        title: '失败代码',
        dataIndex: 'failCode',
        render: text => <Ellipsis length={12} tooltip>{text || '-'}</Ellipsis>,
      }, {
        title: '失败原因',
        dataIndex: 'failReason',
        render: text => <Ellipsis length={12} tooltip>{text || '-'}</Ellipsis>,
      }, {
        title: '原始报文',
        dataIndex: 'originalData',
        render: text => <Ellipsis length={20} tooltip>{text || '-'}</Ellipsis>,
      }, {
        title: '地理位置',
        dataIndex: 'address',
        render: text => <Ellipsis length={12} tooltip>{text || '-'}</Ellipsis>,
      }, {
        title: '坐标详情',
        dataIndex: 'latlon',
        render: (text, record) => this.formatLocation(record),
      },
    ]
    const searchItems = [
      {
        title: '操作时间',
        type: 'rangePicker',
        key: 'rcTimeRange',
        specialStyle: 18,
        disabledDate: this.disabledDate,
      },
    ]
    const tableProps = {
      rowKey: 'caseId',
      columns,
      dataSource: rows,
      size: 'small',
      scroll: { x: '190%' },
      loading,
      pagination: paginationProps(pagination),
    }

    return (
      <Fragment>
        <PateoSearchFormExpand
          searchItems={searchItems}
          fetchUrl='common/pageGet'
          payloadUrl={{ url: '/vehicle/rcUserInfo', deviceId }}
          dateFormatList={['startTime', 'endTime']}
          handleRangePicker={this.handleRangePicker}
          saveFormValues={val => this.setState({ formValues: Object.assign(formValues, val) })}
          handleFormReset={() => this.setState({ formValues: {} })}
        />
        <PateoStandardTable
          tableProps={tableProps}
          fetchUrl='common/pageGet'
          parameterUrl='/vehicle/rcUserInfo'
          formValues={{ ...formValues, deviceId }}
        />
      </Fragment>
    )
  }
}
